<script setup lang="ts">
import { ref, reactive, onMounted, computed, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus, ArrowRight, User, ShoppingBag, Star, Clock, Location, Setting, InfoFilled } from '@element-plus/icons-vue';
import CustomerLayout from '@/components/customer/CustomerLayout.vue';
import { userApi, favoriteApi } from '@/api/customer';
import { getUserInfo, removeToken, removeUserInfo, removeUserRole, clearRememberMe } from '@/utils/auth';
import { OrderStatus } from '@/types/customer';

const router = useRouter();
const loading = ref(false);

// 定义用户信息接口
interface UserInfo {
  id?: number;
  username: string;
  email?: string;
  phone?: string;
  avatar?: string;
  gender?: string;
  birthday?: string;
}

const userInfo = ref<UserInfo | null>(null);
const showEditDialog = ref(false);
const avatarUploadRef = ref();
const avatarLoading = ref(false);
const profileFormRef = ref();

// 收藏和历史统计数据
const stats = ref({
  favoriteStores: 0,
  favoriteFoods: 0
});

// 订单状态映射
const ORDER_STATUS_DISPLAY = {
  [OrderStatus.ORDER_CREATED]: { name: '待付款', showBadge: true },
  [OrderStatus.PENDING]: { name: '已支付', showBadge: true },
  [OrderStatus.MERCHANT_CONFIRMED]: { name: '已确认', showBadge: false },
  [OrderStatus.READY_WAITING_RIDER]: { name: '准备中', showBadge: true },
  [OrderStatus.ACCEPTED]: { name: '配送中', showBadge: true },  // 添加ACCEPTED状态
  [OrderStatus.RIDER_ASSIGNED]: { name: '配送中', showBadge: true },
  [OrderStatus.FOOD_PICKED]: { name: '配送中', showBadge: true },
  [OrderStatus.DELIVERED]: { name: '已完成', showBadge: false },
  [OrderStatus.COMPLETED]: { name: '已完成', showBadge: false },
  [OrderStatus.CANCELLED]: { name: '已取消', showBadge: false }
};

// 订单状态统计
const orderStats = ref([
  { type: OrderStatus.ORDER_CREATED, name: ORDER_STATUS_DISPLAY[OrderStatus.ORDER_CREATED].name, count: 0, showBadge: ORDER_STATUS_DISPLAY[OrderStatus.ORDER_CREATED].showBadge },
  { type: OrderStatus.PENDING, name: ORDER_STATUS_DISPLAY[OrderStatus.PENDING].name, count: 0, showBadge: ORDER_STATUS_DISPLAY[OrderStatus.PENDING].showBadge },
  { type: OrderStatus.RIDER_ASSIGNED, name: ORDER_STATUS_DISPLAY[OrderStatus.RIDER_ASSIGNED].name, count: 0, showBadge: ORDER_STATUS_DISPLAY[OrderStatus.RIDER_ASSIGNED].showBadge },
  { type: OrderStatus.COMPLETED, name: ORDER_STATUS_DISPLAY[OrderStatus.COMPLETED].name, count: 0, showBadge: ORDER_STATUS_DISPLAY[OrderStatus.COMPLETED].showBadge },
  { type: OrderStatus.CANCELLED, name: ORDER_STATUS_DISPLAY[OrderStatus.CANCELLED].name, count: 0, showBadge: ORDER_STATUS_DISPLAY[OrderStatus.CANCELLED].showBadge }
]);

// 个人信息表单
const profileForm = reactive<UserInfo>({
  username: '',
  email: '',
  phone: '',
  avatar: '',
  gender: '',
  birthday: ''
});

// 表单验证规则
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在2到20个字符之间', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ]
};

// 获取用户资料
const fetchUserProfile = async () => {
  try {
    loading.value = true;
    
    // 从本地存储获取基本用户信息
    const storedUserInfo = getUserInfo();
    if (storedUserInfo) {
      userInfo.value = storedUserInfo;
      console.log('从本地存储获取用户信息:', storedUserInfo);
    }
    
    // 从API获取完整的用户信息
    console.log('开始从API获取用户信息...');
    const res = await userApi.getProfile();
    console.log('API返回用户信息:', res);
    
    if (res && res.data) {
      // 正确解析API响应数据结构
      let userData = null;
      if (res.data.data) {
        // 标准响应格式: {status, message, data: {用户信息}}
        userData = res.data.data;
      } else if (res.data.id || res.data.username) {
        // 直接用户数据格式: {id, username, ...}
        userData = res.data;
      }
      
      if (userData) {
        userInfo.value = userData;
        console.log('用户信息设置成功:', userData);
        
        // 获取收藏统计
        await fetchFavoriteStats();
      } else {
        console.warn('无法解析用户数据:', res.data);
        // 保持本地存储的用户信息
        if (storedUserInfo && !userInfo.value) {
          userInfo.value = storedUserInfo;
        }
      }
    } else {
      console.warn('API响应格式异常:', res);
      // 如果API返回格式异常，但本地有用户信息，则保持本地信息
      if (!userInfo.value && storedUserInfo) {
        userInfo.value = storedUserInfo;
      }
    }
    
  } catch (error) {
    console.error('获取用户信息失败:', error);
    
    // 检查是否是认证错误
    if (error && (error as any).response?.status === 401) {
      console.log('用户未认证，清除本地信息');
      userInfo.value = null;
      ElMessage.error('请重新登录');
    } else {
      // 其他错误，保持现有用户信息（如果有的话）
      const storedUserInfo = getUserInfo();
      if (storedUserInfo && !userInfo.value) {
        userInfo.value = storedUserInfo;
        console.log('API获取失败，使用本地存储的用户信息');
      }
      ElMessage.error('获取用户信息失败，使用缓存信息');
    }
  } finally {
    loading.value = false;
  }
};

// 获取收藏统计
const fetchFavoriteStats = async () => {
  try {
    console.log('开始获取收藏统计...');
    
    // 获取收藏统计：使用较大的size来获取总数，或者使用专门的统计接口
    const [storesRes, foodsRes] = await Promise.allSettled([
      favoriteApi.getFavoriteStores({ page: 1, size: 10 }), // 适中的size，主要获取totalElements
      favoriteApi.getFavoriteFoods({ page: 1, size: 10 })
    ]);
    
    // 处理店铺收藏统计
    if (storesRes.status === 'fulfilled' && storesRes.value && storesRes.value.data) {
      const responseData = storesRes.value.data as any;
      console.log('店铺收藏API响应:', responseData);
      
      // 解析嵌套的数据结构
      let actualData = responseData.data || responseData;
      
      if (Array.isArray(actualData)) {
        // 直接是数组，统计长度
        stats.value.favoriteStores = actualData.length;
        console.log('店铺收藏统计(数组长度):', stats.value.favoriteStores);
      } else if (actualData && typeof actualData === 'object') {
        // 分页对象格式，优先使用totalElements字段（最准确）
        if (typeof actualData.totalElements === 'number') {
          stats.value.favoriteStores = actualData.totalElements;
          console.log('店铺收藏统计(totalElements):', stats.value.favoriteStores);
        } else if (typeof actualData.total === 'number') {
          stats.value.favoriteStores = actualData.total;
          console.log('店铺收藏统计(total):', stats.value.favoriteStores);
        } else if (Array.isArray(actualData.content)) {
          // 备用方案：content数组长度（注意：这只是当前页的数量，不是总数）
          stats.value.favoriteStores = actualData.content.length;
          console.log('店铺收藏统计(content长度，可能不准确):', stats.value.favoriteStores);
        } else {
          stats.value.favoriteStores = 0;
        }
      } else {
        stats.value.favoriteStores = 0;
      }
      console.log('店铺收藏统计解析结果:', stats.value.favoriteStores);
    } else {
      console.warn('获取店铺收藏统计失败:', storesRes);
      stats.value.favoriteStores = 0;
    }
    
    // 处理商品收藏统计
    if (foodsRes.status === 'fulfilled' && foodsRes.value && foodsRes.value.data) {
      const responseData = foodsRes.value.data as any;
      console.log('商品收藏API响应:', responseData);
      
      // 解析嵌套的数据结构
      let actualData = responseData.data || responseData;
      
      if (Array.isArray(actualData)) {
        // 直接是数组，统计长度
        stats.value.favoriteFoods = actualData.length;
        console.log('商品收藏统计(数组长度):', stats.value.favoriteFoods);
      } else if (actualData && typeof actualData === 'object') {
        // 分页对象格式，优先使用totalElements字段（最准确）
        if (typeof actualData.totalElements === 'number') {
          stats.value.favoriteFoods = actualData.totalElements;
          console.log('商品收藏统计(totalElements):', stats.value.favoriteFoods);
        } else if (typeof actualData.total === 'number') {
          stats.value.favoriteFoods = actualData.total;
          console.log('商品收藏统计(total):', stats.value.favoriteFoods);
        } else if (Array.isArray(actualData.content)) {
          // 备用方案：content数组长度（注意：这只是当前页的数量，不是总数）
          stats.value.favoriteFoods = actualData.content.length;
          console.log('商品收藏统计(content长度，可能不准确):', stats.value.favoriteFoods);
        } else {
          stats.value.favoriteFoods = 0;
        }
      } else {
        stats.value.favoriteFoods = 0;
      }
      console.log('商品收藏统计解析结果:', stats.value.favoriteFoods);
    } else {
      console.warn('获取商品收藏统计失败:', foodsRes);
      stats.value.favoriteFoods = 0;
    }
    
    console.log('收藏统计获取完成:', stats.value);
  } catch (error) {
    console.error('获取收藏统计失败:', error);
    // 设置默认值，但不影响用户信息显示
    stats.value.favoriteStores = 0;
    stats.value.favoriteFoods = 0;
  }
};

// 打开编辑个人信息对话框
const openEditDialog = () => {
  if (!userInfo.value) {
    goToLogin();
    return;
  }
  
  // 复制用户信息到表单
  profileForm.username = userInfo.value.username || '';
  profileForm.email = userInfo.value.email || '';
  profileForm.phone = userInfo.value.phone || '';
  profileForm.avatar = userInfo.value.avatar || '';
  profileForm.gender = userInfo.value.gender || '';
  profileForm.birthday = userInfo.value.birthday || '';
  
  showEditDialog.value = true;
};

// 上传头像
const handleAvatarUpload = async (file) => {
  if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
    ElMessage.error('头像只能是JPG或PNG格式!');
    return false;
  }
  if (file.size / 1024 / 1024 > 2) {
    ElMessage.error('头像大小不能超过2MB!');
    return false;
  }
  
  avatarLoading.value = true;
  
  try {
    // 如果有现有头像，先删除旧头像（参考微信小程序逻辑）
    if (profileForm.avatar) {
      try {
        // 检查头像URL是否有效且包含有效路径
        const fullUrl = profileForm.avatar;
        if (typeof fullUrl === 'string' && fullUrl.trim()) {
          // 提取头像路径进行删除
          const match = fullUrl.match(/blm-images\/preview\/avatar\/[^\/]+$/);
          if (match) {
            const avatarUrl = match[0];
            console.log('准备删除的头像URL:', avatarUrl);
            if (avatarUrl && avatarUrl.startsWith('blm-images/preview/avatar/')) {
              await userApi.deleteAvatar(avatarUrl);
              console.log('旧头像删除成功');
            }
          }
        }
      } catch (error) {
        console.error('删除旧头像失败:', error);
        // 继续执行，不让删除失败影响上传新头像
      }
    }
    
    // 上传新头像
    const res = await userApi.uploadAvatar(file);
    if (res && res.data) {
      // 根据接口文档，处理响应数据
      let avatarUrl = '';
      if (typeof res.data === 'string') {
        avatarUrl = res.data;
      } else if (res.data.url) {
        avatarUrl = res.data.url;
      } else if (res.data.data && typeof res.data.data === 'string') {
        avatarUrl = res.data.data;
      }
      
      if (avatarUrl) {
        profileForm.avatar = avatarUrl;
        ElMessage.success('头像上传成功');
        
        // 头像上传成功后，更新本地用户信息中的头像
        if (userInfo.value) {
          userInfo.value = {
            ...userInfo.value,
            avatar: avatarUrl
          };
          console.log('头像更新成功，已同步到用户信息');
        }
      } else {
        throw new Error('服务器返回的头像URL无效');
      }
    } else {
      throw new Error('上传失败');
    }
  } catch (error) {
    console.error('头像上传失败:', error);
    let errorMessage = '头像上传失败';
    if (error instanceof Error) {
      if (error.message.includes('未登录')) {
        errorMessage = '请先登录后再更换头像';
      } else if (error.message.includes('URL无效')) {
        errorMessage = '头像上传失败，请重试';
      }
    }
    ElMessage.error(errorMessage);
  } finally {
    avatarLoading.value = false;
  }
  
  return false; // 阻止默认上传行为
};

// 提交个人信息表单
const submitProfileForm = async (formEl) => {
  if (!formEl) return;
  
  await formEl.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true;
        
        // 表单验证（参考微信小程序逻辑）
        if (!profileForm.username.trim()) {
          ElMessage.error('请输入用户名');
          return;
        }
        if (profileForm.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(profileForm.email)) {
          ElMessage.error('邮箱格式不正确');
          return;
        }
        
        // 根据接口文档，只传递支持的字段
        const updateData = {
          username: profileForm.username.trim(),
          email: profileForm.email?.trim() || '',
          avatar: profileForm.avatar || ''
        };
        
        const res = await userApi.updateProfile(updateData);
        if (res && res.data) {
          ElMessage.success('个人信息更新成功');
          
          // 解析服务器返回的数据结构
          let updatedUserData = null;
          if (res.data.data) {
            // 标准响应格式: {status, message, data: {用户信息}}
            updatedUserData = res.data.data;
          } else if (res.data.id || res.data.username) {
            // 直接用户数据格式: {id, username, ...}
            updatedUserData = res.data;
          }
          
          // 更新本地用户信息
          if (updatedUserData && typeof updatedUserData === 'object') {
            userInfo.value = {
              ...userInfo.value,
              ...(updatedUserData as UserInfo) // 使用服务器返回的最新数据
            };
            console.log('用户信息更新成功:', userInfo.value);
          } else {
            // 如果解析失败，至少更新表单中的数据
            userInfo.value = {
              ...userInfo.value,
              username: profileForm.username,
              email: profileForm.email,
              avatar: profileForm.avatar
            };
            console.log('使用表单数据更新用户信息');
          }
          
          showEditDialog.value = false;
        } else {
          throw new Error('更新失败');
        }
      } catch (error) {
        console.error('更新个人信息失败:', error);
        ElMessage.error('更新个人信息失败，请重试');
      } finally {
        loading.value = false;
      }
    }
  });
};

// 退出登录
const logout = () => {
  console.log('用户主动退出登录');
  ElMessageBox.confirm('确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const loading = ElMessage({
      message: '正在退出登录...',
      type: 'info',
      duration: 0 // 不自动关闭
    });

    try {
      // 调用退出登录API，设置较短的超时时间
      const controller = new AbortController();
      const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒超时
      
      await userApi.logout();
      clearTimeout(timeoutId);
      console.log('退出登录API调用成功');
    } catch (error: any) {
      console.error('退出登录API调用失败:', error);
      
      // 检查是否是超时或网络错误
      if (error.name === 'AbortError' || error.code === 'ECONNABORTED') {
        console.warn('退出登录API超时，但继续清除本地存储');
      } else if (error.message?.includes('timeout') || error.message?.includes('Network Error')) {
        console.warn('网络超时或连接错误，但继续清除本地存储');
      }
      
      // 即使API调用失败，也继续清除本地存储
    } finally {
      loading.close(); // 关闭loading提示
      
      // 彻底清除所有认证信息，包括记住的登录信息
      removeToken();
      removeUserInfo();
      removeUserRole();
      clearRememberMe(); // 添加这行来清除记住的登录信息
      userInfo.value = null;
      stats.value = { favoriteStores: 0, favoriteFoods: 0 };
      console.log('用户信息已清除，即将跳转登录页');
      ElMessage.success('已退出登录');
      router.push('/customer/login');
    }
  }).catch(() => {
    // 用户取消操作，不做任何处理
    console.log('用户取消退出登录');
  });
};

// 导航函数
const goToLogin = () => router.push('/customer/login');
const goToOrders = (type: OrderStatus | '' = '') => router.push(`/customer/orders${type ? '?type=' + type : ''}`);
const goToFavoriteStores = () => router.push('/customer/favorites/stores');
const goToFavoriteFoods = () => router.push('/customer/favorites/foods');
const goToHistory = () => router.push('/customer/history');
const goToAddress = () => router.push('/customer/addresses');
const goToSettings = () => {
  ElMessageBox.confirm('确定要退出登录吗?', '设置', {
    confirmButtonText: '退出登录',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    logout();
  }).catch(() => {
    // 用户取消操作
  });
};

// 默认头像
const defaultAvatar = computed(() => {
  return userInfo.value?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
});

// 性别选项
const genderOptions = [
  { label: '男', value: 'MALE' },
  { label: '女', value: 'FEMALE' },
  { label: '保密', value: 'OTHER' }
];

// 在组件挂载时获取用户信息
onMounted(() => {
  fetchUserProfile();
});

// 监控 userInfo 变化，用于调试
watchEffect(() => {
  console.log('userInfo 状态变化:', userInfo.value);
});
</script>

<template>
  <CustomerLayout>
    <div class="profile-container">
      <!-- 用户信息头部 -->
      <div class="user-header">
        <!-- 调试信息 -->
        <!-- <div style="background: rgba(255,0,0,0.1); padding: 10px; margin-bottom: 10px; font-size: 12px;">
          Debug: userInfo = {{ userInfo ? 'exists' : 'null' }}, loading = {{ loading }}
        </div> -->
        
        <div v-if="userInfo" class="user-info" @click="openEditDialog">
          <el-avatar :size="70" :src="defaultAvatar" />
          <div class="info">
            <h3 class="username">{{ userInfo.username }}</h3>
            <p class="phone" v-if="userInfo.phone">{{ userInfo.phone }}</p>
          </div>
          <el-icon class="edit-icon"><ArrowRight /></el-icon>
        </div>
        <el-button v-else type="primary" @click="goToLogin" class="login-btn">
          点击登录
        </el-button>
      </div>

      <!-- 订单概览 -->
      <div v-if="userInfo" class="order-overview">
        <div class="overview-header">
          <h3>我的订单</h3>
          <div class="more" @click="goToOrders()">
            <span>查看全部</span>
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
        <div class="order-types">
          <div 
            v-for="item in orderStats" 
            :key="item.type" 
            class="type-item"
            @click="goToOrders(item.type)"
          >
            <el-badge :value="item.count" :hidden="!item.showBadge || item.count === 0" class="order-badge">
              <el-icon :size="24"><ShoppingBag /></el-icon>
            </el-badge>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>

      <!-- 功能菜单 -->
      <div v-if="userInfo" class="menu-list">
        <div class="menu-group">
          <div class="menu-item" @click="goToFavoriteStores">
            <div class="menu-icon">
              <el-icon><Star /></el-icon>
            </div>
            <span class="menu-text">收藏的店铺</span>
            <div class="menu-right">
              <span class="count">{{ stats.favoriteStores }}</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
          <div class="menu-item" @click="goToFavoriteFoods">
            <div class="menu-icon">
              <el-icon><Star /></el-icon>
            </div>
            <span class="menu-text">收藏的商品</span>
            <div class="menu-right">
              <span class="count">{{ stats.favoriteFoods }}</span>
              <el-icon><ArrowRight /></el-icon>
            </div>
          </div>
          <div class="menu-item" @click="goToHistory">
            <div class="menu-icon">
              <el-icon><Clock /></el-icon>
            </div>
            <span class="menu-text">浏览历史</span>
            <el-icon><ArrowRight /></el-icon>
          </div>
          <div class="menu-item" @click="goToAddress">
            <div class="menu-icon">
              <el-icon><Location /></el-icon>
            </div>
            <span class="menu-text">地址管理</span>
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
        <div class="menu-group">
          <div class="menu-item" @click="goToSettings">
            <div class="menu-icon">
              <el-icon><Setting /></el-icon>
            </div>
            <span class="menu-text">设置</span>
            <el-icon><ArrowRight /></el-icon>
          </div>
        </div>
      </div>

      <!-- 编辑个人信息对话框 -->
      <el-dialog
        v-model="showEditDialog"
        title="编辑个人信息"
        width="400px"
      >
        <el-form 
          ref="profileFormRef" 
          :model="profileForm" 
          :rules="rules" 
          label-width="80px"
        >
          <div class="avatar-upload">
            <el-avatar :size="100" :src="profileForm.avatar || defaultAvatar" />
            <el-upload
              ref="avatarUploadRef"
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :before-upload="handleAvatarUpload"
            >
              <el-button type="primary" :loading="avatarLoading" size="small">
                更换头像
              </el-button>
            </el-upload>
          </div>
          
          <el-form-item label="用户名" prop="username">
            <el-input v-model="profileForm.username" />
          </el-form-item>
          
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="profileForm.phone" disabled>
              <template #append>
                <el-tooltip content="暂不支持修改手机号" placement="top">
                  <el-icon><InfoFilled /></el-icon>
                </el-tooltip>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="profileForm.email" placeholder="选填" />
          </el-form-item>
          
          
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="showEditDialog = false">取消</el-button>
            <el-button type="primary" @click="submitProfileForm(profileFormRef)">
              保存
            </el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 加载中 -->
      <div v-if="loading" class="loading">
        <el-skeleton :rows="10" animated />
      </div>
    </div>
  </CustomerLayout>
</template>

<style scoped>
.profile-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* 用户信息头部 */
.user-header {
  background: linear-gradient(135deg, #ffe082 0%, #ffd54f 100%);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.info {
  flex: 1;
  margin-left: 20px;
}

.username {
  font-size: 18px;
  color: #8b4513;
  margin: 0 0 5px;
}

.phone {
  font-size: 14px;
  color: #a05a1c;
  margin: 0;
}

.edit-icon {
  color: #a05a1c;
  font-size: 18px;
}

.login-btn {
  width: 100%;
  height: 44px;
  font-size: 16px;
}

/* 订单概览 */
.order-overview {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.overview-header h3 {
  font-size: 16px;
  color: #8b4513;
  margin: 0;
}

.more {
  font-size: 14px;
  color: #a05a1c;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.more span {
  margin-right: 5px;
}

.order-types {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.type-item span {
  margin-top: 10px;
  font-size: 14px;
  color: #8b4513;
}

.order-badge :deep(.el-badge__content) {
  background-color: #ff6b6b;
}

/* 功能菜单 */
.menu-list {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.menu-group {
  margin-bottom: 10px;
}

.menu-group:last-child {
  margin-bottom: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  border-bottom: 1px solid #f4f4f4;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  color: #ffa726;
}

.menu-text {
  flex: 1;
  font-size: 15px;
  color: #333;
}

.menu-right {
  display: flex;
  align-items: center;
  color: #999;
}

.count {
  margin-right: 5px;
  color: #ff6b6b;
}

/* 头像上传 */
.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-uploader {
  margin-top: 10px;
}

/* 表单提示 */
.field-tip {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}

/* 加载中 */
.loading {
  padding: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .order-types {
    flex-wrap: wrap;
  }
  
  .type-item {
    width: 33.33%;
    margin-bottom: 15px;
  }
}
</style>
